<template>
  <view class="styleContainer" :style="{ backgroundImage: 'url(' + srcBg + ')' }">
    <view :style="{ height: titleBarMarginTop }"></view>
    <view class="styleTopContainer">
      <!-- 导航栏 -->
      <view class="styleTitleContainer">
        <view class="styleTitleLeft">
          <image class="styleGoBack" :src="srcGoBack" @click="clickBack" v-if="pagesLength >= 2"></image>
          <image class="styleGoBack" :src="srcGoHome" @click="clickHome" v-else></image>
        </view>
        <view class="styleTitleCenter">
          <span class="styleTitleContent">查专业</span>
          <span class="styleTitleDegree" @click="clickTitleDegree">{{ degreeText }}
            <image class="styleTitleTriangle" :src="srcMajorTriangle"></image>
          </span>
        </view>
        <view class="styleTitleRight"></view>
      </view>
      <!-- 搜索框 -->
      <view class="styleSearchContainer" @click="clickSearch" v-if="!isInputMode">
        <u-input class="styleInput" placeholder="搜索专业的名称" :focus="isFocus" v-model="inputText" :clearable="false"
          :placeholder-style="placeholderStyle" @click="clickInput" disabled />
        <image class="styleSearchIcon" :src="srcInputSearchIcon"></image>
      </view>
      <view class="styleSearchInputModeContainer" v-if="isInputMode">
        <u-input class="styleInput" placeholder="搜索专业的名称" :focus="inputModeIsFocus" v-model="inputModeText"
          :clearable="false" :placeholder-style="placeholderStyle" @input="onInputChanged" @blur="onBlur" />
        <view class="styleClearContainer">
          <image class="styleClearIcon" :src="srcInputSearchClose" @click="clickClear" v-if="isShowClear"></image>
          <view class="styleCancelText" @click="clickCancel">取消</view>
        </view>
      </view>
    </view>
    <view class="styleMajorList" v-if="isShowMajorList" :style="{ height: contentHeight }" @click="clickScrollView">
      <scroll-view class="styleScrollView" scroll-y="true" @scrolltoupper="onRefresh" @scrolltolower="onLoadMore"
        @scroll="onScroll" :upper-threshold="50" :lower-threshold="50">
        <view class="styleItem" v-for="(item, index) in list" :key="index" @click="clickMajorItem(item)">
          <rich-text class="styleName" :nodes="highLightText(item.tagName)"></rich-text>
          <view class="styleDesciption">{{ item.topName }} - {{ item.parentName }}</view>
          <view class="styleLine" v-if="index != list.length - 1"></view>
        </view>
        <view class="styleBottom" v-if="isShowBottom"></view>
      </scroll-view>
    </view>
    <view class="styleEmpty" @click="clickEmptyPage" v-if="isShowEmpty" :style="{ height: contentHeight }">没有找到符合的内容
    </view>
    <view class="[isShowAnim?'topTriangleBubbleContainer styleHasAnimation':'topTriangleBubbleContainer']"
      v-if="isShowBubble" :style="{ top: bubbleMarginTop }">
      <view class="topTriangleBubble">
        <text class="styleBubbleText" @click="clickUndergraduate">本科</text>
        <text class="styleBubbleText" @click="clickJuniorCollege">专科</text>
      </view>
    </view>
    <!-- 职业分类 -->
    <MajorFilterView v-show="isShowMajorFilter" :cateType="majorListParam.cateType" :rectTop="searchBottom"
      :specialStyle="{ height: contentHeight }" @closeBubble="closeBubble" ref="filterListRef"
      @clickItem="clickMajorItem" />
  </view>
</template>
<script>
import { getpositionTagAndParentList } from "@/api/modules/major";
import ShareMixin from "@/mixins/share";
import MajorFilterView from "../components/MajorFilterView";
export default {
  mixins: [ShareMixin],
  components: {
    MajorFilterView,
  },
  data() {
    return {
      searchBottom: 0,
      shareTitle: "查查你的专业的就业前景",
      pagesLength: 0,
      isFocus: false,
      inputModeIsFocus: true,
      inputText: "",
      inputModeText: "",
      degreeText: "本科",
      isInputMode: false, //输入模式显示输出结果，非输入模式显示全部列表
      isShowClear: false,
      isShowMajorList: false, //展示搜索结果
      isShowEmpty: false,
      isShowBubble: false,
      isShowMajorFilter: true,
      srcGoBack:
        this.$imgBaseSelf + "career/positionDictionary/major_go_back.webp",
      srcGoHome: this.$imgBaseSelf + "home-b.png",
      srcInputSearchIcon:
        this.$imgBaseSelf + "career/positionDictionary/input_search_icon.webp",
      srcMajorTriangle:
        this.$imgBaseSelf + "career/positionDictionary/major_triangle.webp",
      srcInputSearchClose:
        this.$imgBaseSelf + "career/positionDictionary/input_seach_close.webp",
      placeholderStyle:
        "color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;",
      list: [], //搜索结果
      loadingType: "normal",
      majorListParam: {
        cateType: "30",
        pageNo: 1,
        pageSize: 10,
        pages: 0,
      },
      statusBarHeight: 0,
      titleBarMarginTop: 0,
      bubbleMarginTop: 0,
      contentHeight: 0,
      isHome: true,
      srcBg:
        this.$imgBaseSelf +
        "career/positionDictionary/bg_major_searchhome.webp",
      isShowBottom: false,
      sharePath: "/pagesSub/careerNew/positionDictionary/MajorSearch",
      isShowAnim: false,
    };
  },
  onLoad() {
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "",
    });
  },
  created() {
    this.pagesLength = getCurrentPages().length;
    console.log("pagesLength:" + this.pagesLength);
    this.getSearchBottom();
  },
  mounted() {
    this.getStatusBarHeight();
  },
  methods: {
    getSearchBottom() {
      const { screenHeight } = uni.getSystemInfoSync();
      uni
        .createSelectorQuery()
        .in(this)
        .select(".styleSearchContainer")
        .boundingClientRect((rect) => {
          this.searchBottom = rect.bottom;
        })
        .exec();
    },
    closeBubble() {
      this.isShowBubble = false;
    },
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + "px";
      console.log("statusBarHeight:" + this.statusBarHeight + "px");
      this.bubbleMarginTop = this.statusBarHeight + uni.upx2px(88) + "px";
      console.log("bubbleMarginTop:" + this.bubbleMarginTop);
      const screenHeight = res.windowHeight;
      console.log("windowHeight:" + screenHeight);
      this.contentHeight =
        screenHeight - uni.upx2px(196) - this.statusBarHeight + "px";
      console.log("contentHeight:" + this.contentHeight);

      const platform = res.platform;
      console.log("手机平台" + platform);
    },
    clickBack() {
      console.log("clickBack");
      uni.navigateBack();
    },
    clickHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    clickSearch() {
      console.log("clickSearch");
      this.isInputMode = true;
      // this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickInput() {
      console.log("clickInput");
      this.isInputMode = true;
      this.isShowMajorList = true;
      this.isShowBubble = false;
      // this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickClear() {
      this.inputModeText = "";
      this.isShowClear = false;
      this.isShowEmpty = false;
      this.loadingType = "normal";
      this.majorListParam.pageNo = 1;
      this.list = [];
      // this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";

      this.inputModeIsFocus = false;
      setTimeout(() => {
        this.inputModeIsFocus = true;
      }, 0);
    },
    clickCancel() {
      console.log("clickCancel");
      this.isShowMajorList = false;
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.list = [];
      // this.isShowMajorFilter = true;
      // this.srcBg =
      //   this.$imgBaseSelf +
      //   "career/positionDictionary/bg_major_searchhome.webp";
    },
    onInputChanged(value) {
      console.log("--value:" + value);
      this.loadingType = "normal";
      this.majorListParam.pageNo = 1;
      if (value && value.length > 0) {
        this.isShowClear = true;
        this.getData();
      } else {
        this.isShowClear = false;
        this.isShowEmpty = false;
        this.list = [];
      }
    },
    onRefresh() {
      console.log("onRefresh");
    },
    onLoadMore() {
      console.log("onLoadMore");
      this.loadMore();
    },
    onScroll(event) {
      // console.log(event);
    },
    getData() {
      const params = {
        pageNo: this.majorListParam.pageNo,
        pageSize: this.majorListParam.pageSize,
        tagLevel: 3,
        tagType: 10,
        cateType: this.majorListParam.cateType,
        matchName: this.inputModeText,
      };
      console.log("请求参数:", params);
      getpositionTagAndParentList(params)
        .then((res) => {
          console.log("列表数据:", res);
          if (res.code == 200) {
            this.list = res.data;
            this.majorListParam.pageNo++;
            this.majorListParam.pages = res.pageparam.pages;
            if (this.majorListParam.pageNo > res.pageparam.pages) {
              this.loadingType = "nomore";
            }
            if (res.data.length == 0) {
              this.isShowMajorList = false;
              this.isShowEmpty = true;
            } else {
              this.isShowMajorList = true;
              this.isShowEmpty = false;
            }
            if (this.inputModeText == "") {
              this.isShowClear = false;
              this.isShowEmpty = false;
              this.list = [];
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          console.log("finally");
        });
      this.isShowBottom = false;
    },
    loadMore() {
      console.log("loadMore");
      if (this.loadingType == "normal") {
        this.loadingType = "loading";
        setTimeout((res) => {
          // this.list = this.list.concat(this.list);
          const params = {
            pageNo: this.majorListParam.pageNo,
            pageSize: this.majorListParam.pageSize,
            tagLevel: 3,
            tagType: 10,
            cateType: this.majorListParam.cateType,
            matchName: this.inputModeText,
          };
          console.log("加载更多请求参数:", params);
          getpositionTagAndParentList(params)
            .then((res) => {
              console.log("加载更多列表数据:", res);
              if (res.code == 200) {
                this.list.push(...res.data);
                this.majorListParam.pageNo++;
                if (this.majorListParam.pageNo > res.pageparam.pages) {
                  this.loadingType = "nomore";
                  console.log("总条数:" + this.list.length);
                  this.isShowBottom = true;
                }
                if (this.inputModeText == "") {
                  this.isShowEmpty = false;
                }
              } else {
                uni.showToast({
                  title: res.status_desc,
                  icon: "none",
                });
              }
            })
            .catch((e) => {
              console.log(e);
            })
            .finally(() => {
              console.log("finally");
            });
          this.loadingType = "normal";
        }, 0);
      }
    },
    highLightText(content) {
      const regex = new RegExp(this.inputModeText, "gi");
      const highlightedText = content.replace(
        regex,
        '<span style="color:#F75A3E;">' + this.inputModeText + "</span>"
      );
      return highlightedText;
    },
    clickTitleDegree() {
      console.log("clickTitleDegree");
      if (this.isShowBubble) {
        this.isShowBubble = false;
      } else {
        this.isShowBubble = true;
      }
      this.isShowMajorList = false;
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.list = [];
      this.isShowMajorFilter = true;
      this.srcBg =
        this.$imgBaseSelf +
        "career/positionDictionary/bg_major_searchhome.webp";
    },
    clickUndergraduate() {
      console.log("clickUndergraduate");
      this.isShowBubble = false;
      if (this.degreeText == "本科") return;
      this.majorListParam.cateType = "30";
      this.degreeText = "本科";
      this.$refs.filterListRef.currentIndexZero();
    },
    clickJuniorCollege() {
      console.log("clickJuniorCollege");
      this.isShowBubble = false;
      if (this.degreeText == "专科") return;
      this.majorListParam.cateType = "10";
      this.degreeText = "专科";
      this.$refs.filterListRef.currentIndexZero();
    },
    clickEmptyPage() {
      console.log("clickEmptyPage");
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.clickCancel();
    },
    clickMajorItem(item) {
      // let pageName = "专业搜索列表页";
      // let params = {
      //   positionOrMajor: 1,
      //   levelNum: 3,
      //   tagName: item.tagName,
      //   positionTagId: item.positionTagId,
      //   pageName,
      //   advertise: true,
      // };
      // getApp().globalData.allCategoryParams = params;
      // uni.switchTab({
      //   url: "/pages/career/positionDictionary/allCategory",
      // });
      console.log("aaaaabbbbbcccc");
      uni.navigateTo({
        url: `pagesSub/careerNew/majorDetail/index`,
      });
    },
    onBlur() {
      console.log("onBlur");
    },
    clickScrollView() {
      console.log("clickScrollView");
      if (this.list.length <= 0) {
        this.clickCancel();
      }
    },
    startAnimation() {
      this.isShowAnim = true;
      setTimeout(() => {
        console.log("setTimeout");
        this.isShowAnim = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
@keyframes animationScale {
  from {
    transform: scale(0);
    //从左上角开始缩放
    transform-origin: left top;
  }

  to {
    transform: scale(1);
  }
}

.styleContainer {
  // background: linear-gradient(180deg, #EFF4FF 0%, #FFFFFF 100%);
  //   background-image: url($img-base + "career/positionDictionary/bg_major_search.webp");
  background-size: 100% 100%;
  height: 100vh;

  .styleTopContainer {
    .styleTitleContainer {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .styleTitleLeft {
        flex: 1;

        .styleGoBack {
          width: 44rpx;
          height: 44rpx;
          margin-left: 32rpx;
        }
      }

      .styleTitleCenter {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .styleTitleContent {
          font-weight: 800;
          color: #222222;
          line-height: 44rpx;
          font-size: 32rpx;
        }

        .styleTitleDegree {
          font-weight: bold;
          display: flex;
          flex-direction: row;
          border-radius: 6rpx;
          background: #ffffff;
          margin-left: 12rpx;
          padding-top: 10rpx;
          padding-bottom: 10rpx;
          padding-left: 12rpx;
          padding-right: 12rpx;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;

          .styleTitleTriangle {
            width: 12rpx;
            height: 9rpx;
            margin-left: 8rpx;
          }
        }
      }

      .styleTitleRight {
        flex: 1;
      }
    }

    .styleSearchContainer {
      display: flex;
      position: relative;
      height: 80rpx;
      background-color: #ffffff;
      margin-left: 32rpx;
      margin-right: 32rpx;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
      border-radius: 16rpx;
      filter: blur(0px);
      margin-top: 4rpx;
      margin-bottom: 4rpx;

      .styleInput {
        height: 80rpx;
        margin-left: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw; // width: 100%;
        margin-right: 80rpx;
      }

      .styleSearchIcon {
        position: absolute;
        top: 50%;
        right: 28rpx;
        transform: translateY(-50%);
        width: 40rpx;
        height: 40rpx;
      }

      .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    .styleSearchInputModeContainer {
      display: flex;
      position: relative;
      height: 80rpx;
      background-color: #ffffff;
      margin-left: 32rpx;
      margin-right: 32rpx;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
      border-radius: 16rpx;
      filter: blur(0px);
      margin-top: 4rpx;
      margin-bottom: 4rpx;

      .styleInput {
        height: 80rpx;
        margin-left: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw; // width: 100%;
        margin-right: 140rpx;
      }

      .styleClearContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 28rpx;
        transform: translateY(-50%);

        .styleClearIcon {
          width: 32rpx;
          height: 32rpx;
        }

        .styleCancelText {
          font-weight: 400;
          color: #888888;
          line-height: 36rpx;
          font-size: 28rpx;
          margin-left: 12rpx;
        }
      }
    }
  }

  .styleMajorList {
    background-color: transparent;
    margin-top: 12rpx;

    .styleScrollView {
      height: calc(100vh - 266rpx);

      .styleItem {
        display: flex;
        flex-direction: column;
        width: 100vw;
        justify-content: center;

        .styleName {
          font-weight: 400;
          color: #222222;
          line-height: 40rpx;
          font-size: 30rpx;
          margin-top: 36rpx;
          margin-left: 32rpx;
          margin-right: 32rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .styleDesciption {
          font-weight: 400;
          color: #888888;
          line-height: 40rpx;
          margin-top: 16rpx;
          margin-left: 32rpx;
          margin-right: 32rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .styleLine {
          margin-left: 32rpx;
          margin-right: 32rpx;
          height: 2rpx;
          background: #dde7f9;
          margin-top: 36rpx;
        }
      }

      .styleBottom {
        background-color: transparent;
        height: 50rpx;
      }
    }
  }

  .styleEmpty {
    width: 100vw;
    height: calc(100vh - 266rpx);
    font-weight: 400;
    color: #222222;
    line-height: 36rpx;
    font-size: 28rpx;
    text-align: center;
    padding-top: 48rpx;
  }

  .topTriangleBubbleContainer {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 99;

    .topTriangleBubble {
      margin-top: -6rpx;
      width: 100rpx;
      height: 120rpx;
      background: #ffffff;
      border-radius: 10rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);

      .styleBubbleText {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: bold;
        justify-content: center;
      }
    }

    .topTriangleBubble:before {
      content: "";
      width: 0px;
      height: 0px;
      border-bottom: 8px solid #ffffff;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      position: absolute;
      top: -8rpx;
      left: 4rpx;
    }
  }
}

.styleHasAnimation {
  animation: animationScale 0.5s ease-in-out alternate;
}
</style>